<template>
  <div
    :style="`width:${width};height:${height};margin-top:${mgT};margin-left:${mgL}`"
    class="my-grid-item"
  >
    <slot></slot>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'my-grid-item',
    props: {
      col: {
        type: Number,
        default: 1
      },
      row: {
        type: Number,
        default: 1
      },
      gutter: {
        type: Number,
        default: 10
      },
      idx: {
        type: Number,
        default: 0
      }
    },
    computed: {
      width() {
        const { col, row } = this
        if (col && row) {
          return `calc(${100 / col}% - ${this.gutter}px)`
        }
        return '100%'
      },
      height() {
        const { col, row } = this
        if (col && row) {
          return `calc(${100 / row}% - ${this.gutter}px)`
        }
        return '100%'
      },
      mgT() {
        const { col } = this
        if (this.idx >= col) return this.gutter + 'px'
        return '0px'
      },
      mgL() {
        const { col } = this
        if (this.idx % col !== 0) return this.gutter + 'px'
        return '0px'
      }
    }
  }
</script>
<style lang="scss" scoped>
  .my-grid-item {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
    flex-shrink: 0;
  }
</style>
